// 消息管理页面
<template>
	<div class="all">
		<el-button type="primary" @click="addCourse()" style="float: left;">发布通知</el-button>
    <div id="datediv">
    	<el-date-picker v-model="time" type="datetimerange" v-on:change="selectByDate" :picker-options="pickerOptions"
    	 range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
    </div>

		<div id="searchdiv" >
			<el-input placeholder="请输入内容" v-model="input" class="input-with-select">
				<el-button @click="searchMessage()" slot="append" icon="el-icon-search"></el-button>
			</el-input>

		</div>

		<div style="height: 10px;"></div>

		<el-table :data="pagination.records" border>
			<el-table-column fixed="left" prop="messageId" label="消息编号" sortable></el-table-column>
			<el-table-column prop="messageContent" label="消息内容"></el-table-column>
			<el-table-column prop="messageDate" label="发布时间" sortable></el-table-column>
			<el-table-column prop="course.courseId" label="课程编号"></el-table-column>
			<el-table-column prop="course.courseName" label="课程名称"></el-table-column>
		</el-table>



		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.current"
		 :page-sizes="[6, 10]" :page-size="pagination.size" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
		 class="page">
		</el-pagination>

		<!--发布消息的对话框-->
		<el-dialog title="发布系统更新消息" :visible.sync="addDialogVisible" width="40%" :before-close="handleClose">
			<section class="update">
				<el-form ref="form" :model="form" label-width="100px">
					<el-form-item label="课程编号">
						<el-select v-model="form.course.courseId" @change="getName()">
							<el-option v-for="(item,index)  in course" :key="index" :label="item.courseId" :value='item.courseId'>{{item.courseId}}</el-option>
						</el-select>
						<el-form-item label="课程名称" style="float: right;">
							<el-input v-model="form.course.courseName" disabled="" style="width: 300px;"></el-input>
						</el-form-item>
					</el-form-item>

					<el-form-item label="消息内容">
						<el-input type="textarea" placeholder="请输入内容" v-model="form.messageContent" maxlength="100" show-word-limit>
						</el-input>
					</el-form-item>

				</el-form>
			</section>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				pagination: {
					//分页后的考试信息
					current: 1, //当前页
					total: null, //记录条数
					size: 6, //每页条数
				},
				addDialogVisible: false, //增加的对话框
				form: {
					messageContent: '',
					course: {
						courseId: '',
						courseName: ''
					},
				}, //保存点击以后当前试卷的信息
				course: [],
				input: "",
				select: "全部",
				time: "",
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				}
			};
		},
		created() {
			this.getStudentInfo();

			//获得所有course
			this.$axios('/api/course/getCouAll').then(res => {
				console.log(res.data);
				this.course = res.data;
				//this.form.course.courseName = res.data[0].courseName;
			}).catch(error => {});
		},
		methods: {
			getStudentInfo() {
				//分页查询所有信息
				this.$axios('/api/getMes', {
					params: {
						keywords: '',
						page: this.pagination.current,
						limit: this.pagination.size
					}
				}).then(res => {
					this.pagination = res.data;
				}).catch(error => {});
			},
			//改变当前记录条数
			handleSizeChange(val) {
				this.pagination.size = val;
				this.getStudentInfo();
			},
			//改变当前页码，重新发送请求
			handleCurrentChange(val) {
				this.pagination.current = val;
				this.getStudentInfo();
			},
			addCourse(studentId) { //发布消息
				this.addDialogVisible = true
			},
			submit() { //提交更改
				console.log(this.form);
				if (this.form.course.courseId == "") {
					this.$message({
						message: '请选择课程编号',
						type: 'warning'
					});
				} else if (this.form.messageContent == "") {
					this.$message({
						message: '消息内容不能为空',
						type: 'warning'
					});
				}else{
					this.$axios({
						url: '/api/addMes',
						method: 'put',
						data: {
							...this.form
						}
					}).then(res => {
						console.log(res)
						if (res.data.code == 200) {
							this.$message({
								message: '发布成功',
								type: 'success'
							})
						} else {
							this.$message.error('发布失败');
						}
						this.getStudentInfo()
					})
					this.addDialogVisible = false;
				}
			},
			searchMessage() {
				this.$axios('/api/getMes', {
					params: {
						keywords: this.input,
						page: this.pagination.current,
						limit: this.pagination.size
					}
				}).then(res => {
					this.pagination = res.data;
				}).catch(error => {});

			},
			selectByDate() {
				if (this.time != null) {
					//时间分段查询
					this.$axios('/api/getMesByTime', {
						params: {
							time1: this.time[0],
							time2: this.time[1],
							page: this.pagination.current,
							limit: this.pagination.size
						}
					}).then(res => {
						this.pagination = res.data;
					}).catch(error => {});
				} else {
					//时间为空 全部查询
					this.getStudentInfo();
				}
			},
			getName() {
				//this.form.course.courseId = event.target.value; //获取option对应的value值
				console.log("1++" + this.form.course.courseId);
				this.$axios(`/api/course/getCouById/${this.form.course.courseId}`).then(res => {
					this.form.course.courseName = res.data;
				}).catch(error => {});

			},
			handleClose(done) { //关闭提醒
				// this.$confirm('确认关闭？')
				// 	.then(_ => {
				// 		done();
				// 	}).catch(_ => {});
				this.addDialogVisible = false;
			}
		}
	};
</script>
<style lang="scss" scoped>
	.all {
		padding: 0px 40px;

		.page {
			margin-top: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.edit {
			margin-left: 20px;
		}

		.el-table tr {
			background-color: #dd5862 !important;
		}
	}

	.el-table .warning-row {
		background: #000 !important;
	}

	.el-table .success-row {
		background: #dd5862;
	}

	#searchdiv {
		width: 400px;
		display: inline-block;
    margin-left: 7%;
	}
  #datediv {
  	display: inline-block;
  	width: 300px;
  	margin-left: 41%;
  }
</style>
